﻿
@{
    ViewBag.Title = "Index";
    Layout = null;
}


<link href="~/Scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    body {
        margin: 10px;
    }

    .demo-carousel {
        height: 200px;
        line-height: 200px;
        text-align: center;
    }

    .layui-table-tool-self {
        display: none;
    }
</style>

<div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-on="setChecked">勾选指定节点</button>
    <button type="button" class="layui-btn layui-btn-sm" lay-on="reload">重载实例</button>
</div>

<div id="demo"></div>

<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/layui-v2.5.6/layui/lay/modules/layer.js"></script>
<script src="~/Scripts/layui-v2.5.6/layui/layui.js" asp-append-version="true"></script>
<script>

    layui.use(function () {

        var tree = layui.tree;
        var util = layui.util;

        //获取节点数据
        getTreeData();

        function getTreeData() {
            $.ajax({
                url: "/Permission/GetTreeData",
                type: "post",
                dataType: "json",
                data: {
                    "roleId": 1,
                    "id": 2,
                    "t": 2
                },
                error: function () {
                },
                success: function (data) {
                    treeData = JSON.stringify(data);
                    initMenuTree();
                }
            });
        }

        // 加载列表
        function initMenuTree() {
            //json数组转换成对象
            treeData = eval("(" + treeData + ")");
            // 执行渲染
            tree.render({
                elem: '#demo',
                id: 'treedemo1',//设置树的唯一ID
                data: treeData,
                check: 'checkbox', //勾选风格
                showCheckbox: true,
                //checkChild: false,//是否联动子级节点
                //checkParent: false,//是否联动父级节点
                skin: 'as', //设定皮肤
                drag: true,//点击每一项时是否生成提示信息
                checkboxName: 'aa[]',//复选框的name属性值
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                //click: function (obj) {
                //    var data = obj.data;  //获取当前点击的节点数据
                //   // layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
                //},
            });

            //反填时，只反填子级节点，不要反填父级节点（父级节点反填后，子级节点全部选中）
            setTreeNodeChecked();
        }

        function setTreeNodeChecked() {
            //反填时，只反填子级节点，不要反填父级节点（父级节点反填后，子级节点全部选中）
            tree.setChecked('treedemo1', [ 7]); // 勾选对应 id 值的节点
        }

        // 按钮事件
        util.event('lay-on', {
            getChecked: function () {
                var checkedData = tree.getChecked('treedemo1'); // 根据树的唯一ID获取选中节点的数据
                layer.alert(JSON.stringify(checkedData), { shade: 0.2 });
                console.log(checkedData);
            },
            setChecked: function () {
                //反填时，只反填子级节点，不要反填父级节点（父级节点反填后，子级节点全部选中）
                tree.setChecked('treedemo1', [1, 5]); // 勾选对应 id 值的节点
            },
            reload: function () {
                tree.reload('treedemo1', {}); // 重载实例
            }
        });
    });

</script>

